<template>
    <div class="container">
        <div class="video-section1">
            <dv-box title="实时监控">
                <div class="videoBox" >
                    <div class="videoView">
                    <template v-if="videoFlag">
                        <videoModel videoId="singleVideo" :src="videourl"></videoModel>
                    </template>
                    <template v-else>
                        <ezvideo :src="videourl"></ezvideo>
                    </template>
                    </div>
                    <div class="videoList">
                        <div class="listbox" :class="videoId == item.id ? 'active':''" v-for="(item, index) in videoList[pageIndex]" :key="index" @click="cutVideo(item)">
                            <el-image :src='item.picurl' fit="cover"></el-image>
                            <div class="zhe">{{item.videoname}}</div>
                        </div>
                        <div class="left iconStyle" v-if="leftFlag" @click="cutLeft"><i class="el-icon-arrow-left"></i></div>
                        <div class="right iconStyle" v-if="rightFlag" @click="cutRight"><i class="el-icon-arrow-right"></i></div>
                    </div>
                </div>
            </dv-box>
        </div>

        <div class="video-section2">
            <div class="materBottom" ref="q_bottom">
                <dv-box class="dv" title="AI分析">
                        <dv-scroll-board :config="tableConfig" style="width:100%;height:100%" @click="clickTable"/>
                </dv-box>
            </div>
        </div>
        
        

        <div class="imgPerview" v-if="flag" @click="flag=false">
            <img class="imgbox" :src="url">
            <i class="el-icon-circle-close" @click="flag=false"></i>
        </div>
    </div>
</template>

<script>
import dvBox from "@/components/datav/dv-box.vue";
import videoModel from '@/components/video/video.vue'
import video2 from '@/components/video/video2.vue';
import ezvideo from '@/components/video/ezvideo.vue';
import iTable from '@/components/table/table1.vue';
import { PageBean } from "@/utils/page-bean";
import { aesDecrypt } from '@/utils/utils'
import moment from 'moment'
export default {
    data(){
        return{ 
            videoList:[],
            allList:[],
            pageIndex:0,
            videourl:'',
            videoId:'',
            url:'',
            flag:false,
            leftFlag:false,
            rightFlag:false,
            videoFlag:true,
            // 表格配置
            tableConfig: {},
            tableData: [],
            pageBean: new PageBean(10, 1, 0),
        }
    },
    components:{dvBox, videoModel, iTable, video2, ezvideo},
    props:{
        id:{
            type:Number|String,
            default:''
        },
    },
    // mounted(){
    //         this.$nextTick(()=>{
    //          let dom = document.getElementById('app').offsetHeight
    //          this.$refs.q_bottom.style.height = dom - 608 + 'px'
    //      })
    // },
    created(){
        this.getVideoList()
        this.getAiList()
        this.initTable()
    },
    methods:{
        // 表格点击
        clickTable(item){
            this.url = this.tableData[item.rowIndex] 
            this.flag = true
        },
        // 视频列表
        getVideoList(){
            this.$datav.getVideoList({projectid:this.id,today:moment().format('YYYY-MM-DD')}).then(res =>{
                if(res.data.length !== 0){
                    this.allList.push(...res.data)
                    for(let i = 0;i < this.allList.length; i++){
                        if((i+8)%8 === 0){
                            this.videoList.push(this.allList.slice(i,i+8))
                        }
                    }
                    if(this.videoList.length > 1){
                        this.rightFlag = true
                    }
                    this.videourl = aesDecrypt(res.data[0].videourl)
                    this.videoFlag = this.videourl.indexOf('ezopen') !== -1 ? false : true
                    this.videoId = res.data[0].id
                }
            })
        },
        cutLeft(){
            this.pageIndex -= 1
            if(this.pageIndex <= 0){
                this.leftFlag = false
            }
            this.rightFlag = true
        },
        cutRight(){
            this.pageIndex += 1
            if(this.pageIndex == this.videoList.length-1){
                this.pageIndex = this.videoList.length-1
                this.rightFlag = false
            }
            this.leftFlag = true
        },
        // ai列表
        getAiList(){
            this.$datav.getAiList({projectid:this.id,today:moment().format('YYYY-MM-DD')}).then(res => {
                if(res.data.length !== 0){
                    let arr = []
                    this.url = res.data[0].violationpic
                    res.data.map(item => {
                        this.tableData.push(item.violationpic)
                        arr.push([`<img style="width: 65px; height: 80px; cursor: pointer" src=${item.violationpic}>`,item.eventtype,item.eventtime,item.status])
                    })
                    this.tableConfig = {
                        header: ['预警图片', '预警类型', '预警时间'],
                        index: true,
                        rowNum:5,
                        headerHeight:40,
                        columnWidth:[400,500,400],
                        headerBGC:'#F2F3F5',
                        oddRowBGC:'rgb(255, 255, 255,0)',
                        evenRowBGC:'rgb(255, 255, 255,0)',
                        // headerBGC:'rgba(2, 49, 100, .2)',
                        // oddRowBGC:'rgba(0,59,81,.2)',
                        // evenRowBGC:'rgba(10,39,50,.2)',
                        data:arr
                    }
                }
            })
        },
        // 切换视频
        cutVideo(item){
            this.videourl = aesDecrypt(item.videourl)
            this.videoFlag = this.videourl.indexOf('ezopen') !== -1 ? false : true
            this.videoId = item.id
        },
        // Ai table
        handleAbnormalShow(){},
        pageChange(){},
        //图片处理
        violationphoto(s,v){
            return s ? `http://www.ynlk-lot.com${v}` : v
        },
        // 初始化表格
        initTable() {
        this.tableConfig = {
            loading: false,
            hasSelect: false,
            hasIndex: true,
            hasOperation: false,
            hasSearch: false,
            hasPage: true,
            tr: [
            {
                label: "预警图片",
                minWidth: "110",
                prop: "violationphoto",
                show:"template"
            },
            {
                label: "预警类型",
                minWidth: "160",
                prop: "eventtype",
            },
            {
                label: "预警时间",
                minWidth: "140",
                prop: "eventtime",
            },
            {
                label: "处理情况",
                minWidth: "100",
                prop: "status",
                show:"template"
            }
            ]
        };
        },
    },
}
</script>

<style lang='scss' scoped>
.container{
    height: 100%;
    display: flex;
    flex-direction: column;
    .video-section1{
        margin-bottom: 24px;
    }
    .videoBox{
        display: flex;
        height: 380px;
        .videoView{
            width:30%;
            height: 100%;
            margin-right: 10px;
        }
        .videoList{
            width: 70%;
            // align-items
            display: flex;
            flex-wrap: wrap;
            position: relative;
            margin-bottom: -12px;
            .left{
                position: absolute;
                left: 0;
            }
            .iconStyle{
                top: 45%;
                width: 40px;
                height: 40px;
                font-size: 20px;
                text-align: center;
                line-height: 40px;
                color: #fff;
                background: rgba(0, 0, 0, 0.801);
                border-radius: 100%;
                cursor: pointer;
            }
            .right{
                position: absolute;
                right: 0;
            }
            .listbox{
                width: calc(100% / 4 - 20px);
                height: 47%;
                margin: 0px 10px;
                position: relative;
                cursor: pointer;
                border: 2px solid rgba(255,255,255,.3);
                .el-image{
                    width: 100%;
                    height: 100%;
                }
                .zhe{
                    position: absolute;
                    width: 100%;
                    height: 30px;
                    bottom: 0;
                    background: rgba(70, 70, 70, 0.65);
                    color: #fff;
                    line-height: 30px;
                    font-size:12px;
                    text-align: center;
                }
            }
            .active{
                border: 2px solid #0374FE;
            }
        }
    }
    .video-section2{
        height:calc(100% - 460px);
        min-height: 290px;
        width: 100%;
    }
    .materBottom{
        height: 100%;
        width: 100%;
    }
    .dv{
        width: 100%;
        height: 100%;
    }
}
.imgPerview{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.493);   
    .imgbox{
        position: fixed;
        top: 25%;
        right: 35%;
    }
    .el-icon-circle-close{
        position: fixed;
        top: 5%;
        right: 10%;
        cursor: pointer;
        color: rgb(182, 182, 182);
        font-size: 50px;
    }
}
@include dvScroll
</style>